<template>
	<view>

		<view class="tabs">
			<view class="tab" v-for="(item,index) in navList" :key="item.id" :class="navCurrent==item.id?'active':''"
				@click="navChange(item.id)">
				{{item.tab}}
			</view>
		</view>

		<scroll-view :scroll-y="true"  :scroll-top="scrollTop" class="scroll" @scrolltolower="lower">
			<view  class="node-group">
				<!-- key要换 -->
				<view v-if="nodeList.length>0" class="node-list card" v-for="(item,index) in nodeList" :key="index">
					<view class="node-left">
						<view class="node-name" v-if="navCurrent==1">发货人ID: {{item.idNumber}}</view>
						<view class="node-name" v-if="navCurrent==0">收货人ID: {{item.idNumber}}</view>
						<view class="node-num">数量: {{item.quantity}}</view>
					</view>
					<view class="node-right">
						<view class="node-date">{{item.transferTime}}</view>
						<view class="node-type"></view>
					</view>
				</view>
				<view v-if="nodeList.length==0" class="none">
					暂无信息
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import {giftingInfo} from '@/api/my.js'
	export default {
		data() {
			return {
				scrollTop:0,
				navCurrent: 0,
				navList: [{
					tab: '转赠订单',
					id: 0
				}, {
					tab: '接收订单',
					id: 1
				}],
				nodeList: [],
				params:{
					pageNo:1,
					pageSize:20,
					type:0
				},
				total:0
			};
		},
		methods: {
			async getList(){
				let res = await giftingInfo(this.params)
				this.nodeList = [...this.nodeList,...res.data.records]
				this.total= res.data.total
			},
			navChange(id) {
				this.navCurrent = id
				this.params.type=id
				this.nodeList=[]
				this.getList()
			},
			lower(){
				if(this.nodeList.length<this.total){
					this.params.pageNo++
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	.tabs {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.tab {
		border-radius: 9999px;
		white-space: nowrap;
		background-color: #374151;
		color: #d1d5db;
		padding: 10rpx 24rpx;
		font-weight: 500;
		--tw-text-opacity: 1;
	}

	.active {
		color: #fff;
		background-color: #3b82f6;
	}
	
	.scroll{
		height: calc(100vh - 450rpx);
		overflow: hidden;
		margin-top: 30rpx;
	}

	.node-group {
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.node-list {
		width: 100%;
		padding: 25rpx;
		display: flex;
		align-items: start;
		justify-content: space-between;
	}

	.node-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.node-right {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.node-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #fff;
		line-height: 1;
	}

	.node-num {
		font-size: 28rpx;
		font-weight: 400;
		color: #9ca3af;
		line-height: 1;
	}

	.node-date {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		line-height: 1;
	}

	.node-type {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		line-height: 1;
	}
</style>